import React, { ReactElement, FC, useState } from "react";
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import { IItemList } from "../../../types";
import DeleteIcon from '@mui/icons-material/Delete';
//  import './index.css'
import styles from './index.module.css'



const ItemList: FC<IItemList> = ({
  transitTimes,
  removeTransitTime,
}): ReactElement => {


  return (
    <TableContainer component={Paper}>
    <Table sx={{ minWidth: 650 }} aria-label="simple table">
      <TableHead>
        <TableRow>
          <TableCell align="center">Id</TableCell>
          <TableCell align="center">Origin</TableCell>
          <TableCell align="center">Destination</TableCell>
          <TableCell align="center">EstimatedTime</TableCell>
          <TableCell align="center">Operation</TableCell>
        </TableRow>
      </TableHead>

      <TableBody>
        {transitTimes.map((row) => (
          <TableRow
            key={row.id}
            sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
          >
            <TableCell align="center">{row.id}</TableCell>
            <TableCell align="center">{row.origin} </TableCell>
            <TableCell align="center">{row.destination}</TableCell>
            <TableCell align="center">{row.estimatedtransittime}</TableCell>
            <TableCell align="center"><DeleteIcon className={styles.delete} onClick={(e)=>removeTransitTime(row.id)}></DeleteIcon></TableCell>
          </TableRow>
        ))}
      </TableBody>

    </Table>
  </TableContainer>
  );
};

export default ItemList;
